<template>
  <div class="details">
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <!-- 1.商品图片模块 -->
      <dt-image :price="datas.presentPrice"></dt-image>

      <!-- 2.商品详情模块 -->
      <dt-goods></dt-goods>

      <!-- 3.底部购物栏模块 -->
      <shop-car @showSku="showSku"></shop-car>

      <!-- 4.sku模块 -->
      <transition name="sku">
        <dt-sku v-if="skuBool" @closeSku="closeSku" :price="datas.oriPrice" :datas="datas"></dt-sku>
      </transition>
    </div>
  </div>
</template>

<script>
//import { Toast } from 'vant';
import * as api from "@/request/api/details.js";
import dtGoods from "./components/dtGoods";
import dtImage from "./components/dtImage";
import shopCar from "./components/shopCar";
import dtSku from "./components/dtSku";
export default {
  components: {
    dtGoods,
    dtImage,
    shopCar,
    dtSku
  },
  props: ["id"],
  data() {
    return {
      datas:{},
      skuBool: false
    };
  },
  methods: {
    async API_getDetailGoodsInfo(goodsId) {
      return await api.getDetailGoodsInfo({
        goodsId: goodsId
      });
    },
    //顶部返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 显示sku
    showSku() {
      this.$eventBus.$on("ShowSku", res => {
        this.skuBool = res;
      });
    },
    //关闭sku 
    closeSku() {
      this.$eventBus.$on("CloseSku", res => {
        this.skuBool = res;
      });
    }
  },
  /*async created() {
    //console.log(this.id);
    let res = await this.API_getDetailGoodsInfo(this.id)
    this.$eventBus.$emit("getDetailGoodsInfo",res.data.data)
    this.closeSku()
    this.showSku()
  }*/
  async activated() {
    //console.log(this.id);
    let res = await this.API_getDetailGoodsInfo(this.id)
    this.datas = res.data.data
    this.$eventBus.$emit("getDetailGoodsInfo",res.data.data)
    this.closeSku()
    this.showSku()
  }
};
</script>

<style lang="scss">
@import "@/style/details/details.scss";
.details{
  padding-bottom: 50px;
}
.sku-enter,.sku-leave-to{
  opacity: 0;
}
.sku-enter-active,.sku-leave-active{
  transition: all 0.3s;

}
</style>